<template>
  <a-modal title="箱号、封号" width="640px"
    :visible="visible" :maskClosable="false"
    :footer="null"
    @cancel="handleCancel"
  >
    <p><img src="../../../static/images/tshi.png" style="float:left; margin-right:5px;" />一行填写一个箱子的箱号、封号，填写后在拆分的订单中，自动使用该填写的箱号、封号</p>
    <a-table :columns="columns" :data-source="dataInit" :pagination="false" size="middle">
    </a-table>
  </a-modal>
</template>

<script>
export default {
  name: 'box-title-no-view',
  props: {
    visible: Boolean,
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    const columns = [
      {
        title: '序号',
        width: '80px',
        dataIndex: 'sort'
      },
      {
        title: '箱号',
        dataIndex: 'containerNo'
      },
      {
        title: '封号',
        dataIndex: 'containerSealNo'
      },
      {
        title: '持箱人',
        dataIndex: 'holderName'
      }
    ]

    return {
      columns,
      dataInit: []
    }
  },
  methods: {
    handleCancel () {
      this.$emit('setVisible', false)
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        let newData = [...this.data]
        this.dataInit = newData.map((v, i) => {
          return {
            sort: v.sort,
            holderName: v.holderName,
            containerNo: v.containerNo,
            containerSealNo: v.containerSealNo
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
